<script setup>
defineProps({
  items: {
    type: Array,
    default: () => [],
    validator: value => value.every(item => item.label && item.href)
  }
})

const emit = defineEmits(['navClick'])

const handleClick = (item, event) => {
  emit('navClick', { item, event })
}
</script>

<template>
  <nav role="navigation" aria-label="Main navigation">
    <ul class="nav-list">
      <li
          v-for="(item, index) in items"
          :key="index"
          class="nav-item"
      >
        <a
            :href="item.href"
            class="nav-link"
            @click.prevent="handleClick(item, $event)"
            @keydown.enter="handleClick(item, $event)"
            :aria-label="`Go to ${item.label}`"
            role="button"
            tabindex="0"
        >
          {{ item.label }}
        </a>
      </li>
    </ul>
  </nav>
</template>

<style scoped>
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
}

.nav-link {
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
}

.nav-link:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .nav-list {
    flex-direction: column;
    gap: 1rem;
  }
}
</style>